<template>
    <div id="app_login_page">
        <div class="flex h-full" style="position: relative">
            <div class="hidden min-h-full pl-4 mr-4 xl:flex xl:flex-col xl:w-6/12">
                <div class="my-auto">
                    <img alt="APPLogo" src="./../../assets/logo.png" style="width: 500px">
                    <div class="mt-10 font-medium text-white -enter-x">
                        <span class="inline-block mt-4 text-3xl">开箱即用的中后台管理系统</span>
                    </div>
                </div>
            </div>
            <div class="flex w-full h-full py-5 xl:h-auto xl:py-0 xl:my-0 xl:w-6/12">
                <h2>登录</h2>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "Login"
}
</script>

<style scoped lang="less">
#app_login_page {
    &:before {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        margin-left: -48%;
        background-image: url(../../assets/login-bg.svg);
        background-position: 100%;
        background-repeat: no-repeat;
        background-size: auto 100%;
        content: "";
    }
}
</style>